<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Metas -->
    <title>curtains.js | Documentation | Plane class</title>
    <meta name="description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
    <link rel="canonical" href="https://www.curtainsjs.com/plane-class.html">

    <!-- Facebook OG -->
    <meta property="og:title" content="curtains.js | Documentation | Plane class">
    <meta property="og:type" content="website">
    <meta property="og:description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
    <meta property="og:url" content="https://www.curtainsjs.com/plane-class.html">
    <meta property="og:image" content="https://www.curtainsjs.com/images/curtains-js-logo.jpg">

    <!-- Twitter card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@martinlaxenaire">
    <meta name="twitter:creator" content="@martinlaxenaire">
    <meta name="twitter:title" content="curtains.js | Documentation | Plane class">
    <meta name="twitter:description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
    <meta name="twitter:image" content="https://www.curtainsjs.com/images/curtains-js-logo.jpg">

    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="images/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="images/favicons/favicon-16x16.png">
    <link rel="manifest" href="images/favicons/site.webmanifest">
    <link rel="mask-icon" href="images/favicons/safari-pinned-tab.svg" color="#202340">
    <link rel="shortcut icon" href="images/favicons/favicon.ico">
    <meta name="msapplication-TileColor" content="#202340">
    <meta name="msapplication-config" content="images/favicons/browserconfig.xml">
    <meta name="theme-color" content="#202340">

    <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="page-wrap">

    <div id="canvas"></div>

    <div id="content">

        <header id="header">
            <div class="wrapper">
                <div id="header-wrapper" class="flex-wrapper">
                    <div id="header-title">
                        <a href="/" title="Home">curtains.js</a>
                    </div>
                    <nav id="main-menu">
                        <ul class="flex-wrapper">
                            <li>
                                <a href="get-started.html">Get started</a>
                            </li>
                            <li>
                                <a href="documentation.html" class="active">Docs</a>
                            </li>
                            <li>
                                <a href="download.html">Download</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>

        <section class="content-section api-section">

            <nav id="api-menu-nav">
                <ul id="api-menu">
                    <li class="active">
                        <div class="api-top-menu-item">Core</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="curtains-class.html">Curtains</a>
                            </li>
                            <li class="active">
                                <a href="plane-class.html">Plane</a>

                                <div class="api-class-content">
                                    <div class="api-class-title">
                                        <a href="plane-class.html#basic-usage">Basic usage</a>
                                    </div>
                                    <div class="api-class-title">
                                        <a href="plane-class.html#plane-init-params">Parameters</a>
                                    </div>
                                    <div class="api-class-title">
                                        <a href="plane-class.html#properties">Properties</a>
                                    </div>
                                    <ul class="api-class">
                                        <li>
                                            <a href="plane-class.html#always-draw">alwaysDraw</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#autoload-sources">autoloadSources</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#camera">camera</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#canvases">canvases</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#cross-origin">crossOrigin</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#cull-face">cullFace</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#draw-check-margins">drawCheckMargins</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#gl">gl</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#html-element">htmlElement</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#images">images</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#index">index</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#loader">loader</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#quaternion">quaternion</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#relative-translation">relativeTranslation</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#renderer">renderer</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#render-order">renderOrder</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#rotation">rotation</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#scale">scale</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#target">target</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#textures">textures</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#transform-origin">transformOrigin</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#type">type</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#uniforms">uniforms</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#user-data">userData</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#uuid">uuid</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#videos">videos</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#visible">visible</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#watch-scroll">watchScroll</a>
                                        </li>
                                    </ul>
                                    <div class="api-submenu-title">
                                        <a href="plane-class.html#methods">Methods</a>
                                    </div>
                                    <ul class="api-submenu">
                                        <li>
                                            <a href="plane-class.html#add-texture">addTexture</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#create-texture">createTexture</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#enable-depth-test">enableDepthTest</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#get-bounding-rect">getBoundingRect</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#get-webgl-bounding-rect">getWebGLBoundingRect</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#is-drawn">isDrawn</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#load-canvas">loadCanvas</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#load-canvases">loadCanvases</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#load-image">loadImage</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#load-images">loadImages</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#load-source">loadSource</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#load-sources">loadSources</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#load-video">loadVideo</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#load-videos">loadVideos</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#mouse-to-plane-coords">mouseToPlaneCoords</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#play-videos">playVideos</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#remove">remove</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#remove-render-target">removeRenderTarget</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#reset-plane">resetPlane</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#resize">resize</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#set-perspective">setPerspective</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#set-render-order">setRenderOrder</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#set-render-target">setRenderTarget</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#set-relative-translation">setRelativeTranslation</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#set-rotation">setRotation</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#set-scale">setScale</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#set-transform-origin">setTransformOrigin</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#update-position">updatePosition</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#update-scroll-position">updateScrollPosition</a>
                                        </li>
                                    </ul>
                                    <div class="api-submenu-title">
                                        <a href="plane-class.html#events">Events</a>
                                    </div>
                                    <ul class="api-submenu">
                                        <li>
                                            <a href="plane-class.html#on-after-render">onAfterRender</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#on-after-resize">onAfterResize</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#on-error">onError</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#on-leave-view">onLeaveView</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#on-loading">onLoading</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#on-ready">onReady</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#on-re-enter-view">onReEnterView</a>
                                        </li>
                                        <li>
                                            <a href="plane-class.html#on-render">onRender</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li>
                                <a href="texture-class.html">Texture</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="api-top-menu-item">Frame Buffer Objects</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="render-target-class.html">RenderTarget</a>
                            </li>
                            <li>
                                <a href="shader-pass-class.html">ShaderPass</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="api-top-menu-item">Loaders</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="texture-loader-class.html">TextureLoader</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="api-top-menu-item">Math</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="vec-2-class.html">Vec2</a>
                            </li>
                            <li>
                                <a href="vec-3-class.html">Vec3</a>
                            </li>
                            <li>
                                <a href="mat-4-class.html">Mat4</a>
                            </li>
                            <li>
                                <a href="quat-class.html">Quat</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="api-top-menu-item">Extras</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="ping-pong-plane-class.html">PingPongPlane</a>
                            </li>
                            <li>
                                <a href="fxaa-pass-class.html">FXAAPass</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>

            <div id="api-content">

                <div class="api-content-inner">
                    <div class="inner-section">
                        <h1>Plane class</h1>

                        <div class="api-item-examples">
                            <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/core/Plane.js" title="Plane class source code" target="_blank">Source code</a>
                        </div>

                        <h2 id="basic-usage">Basic usage</h2>
                        <p>
                            Plane class inherits from the BasePlane class, which is a class that just sets up the WebGL (buffers and attributes) and sources loading parts of a plane.<br />
                            Plane <strong>extends</strong> the BasePlane class by adding various properties and methods to keep your WebGL plane in sync with its associated HTML element. All sizes and positions are handled by two matrices that you will have to use inside your vertex shader: the model view matrix and the projection matrix.
                        </p>
                        <p>
                            To create a plane, you will need to <strong>pass your curtains object and a mandatory HTML element</strong>. It will be used to calculate the size and position of your plane.<br />
                        </p>

                        <div class="code">

                            <div class="code-block">
                                <div class="code-comment">
                                    // "canvas" is the ID of our HTML container element
                                </div>
                                <div>
                                    <span class="code-var">const</span> curtains = <span class="code-var">new</span> <span class="code-tag">Curtains</span>({<div class="code-indent"><span class="code-property">container</span>: <span class="code-string">"canvas"</span></div>})<span class="code-var">;</span>
                                </div>
                            </div>

                            <div class="code-block">
                                <span class="code-var">const</span> planeElement = document.<span class="code-tag">getElementById</span>(<span class="code-string">"my-plane"</span>)<span class="code-var">;</span>
                            </div>

                            <div>
                                <span class="code-var">const</span> plane = <span class="code-var">new</span> <span class="code-tag">Plane</span>(curtains<span class="code-var">,</span> planeElement)<span class="code-var">;</span>
                            </div>
                        </div>

                        <h2 id="plane-init-params">Parameters</h2>
                        <p>
                            The code above will create a basic plane but you won't be able to do much with it. The Plane class has a third parameter in which you can pass all the options you need:
                        </p>

                        <div class="code">

                            <div class="code-block">
                                <div class="code-comment">
                                    // "canvas" is the ID of our HTML container element
                                </div>
                                <div>
                                    <span class="code-var">const</span> curtains = <span class="code-var">new</span> <span class="code-tag">Curtains</span>({<div class="code-indent"><span class="code-property">container</span>: <span class="code-string">"canvas"</span></div>})<span class="code-var">;</span>
                                </div>
                            </div>

                            <div class="code-block">
                                <span class="code-var">const</span> planeElement = document.<span class="code-tag">getElementById</span>(<span class="code-string">"my-plane"</span>)<span class="code-var">;</span>
                            </div>

                            <div class="code-block">
                                <div>
                                    <span class="code-var">const</span> params = {
                                </div>
                                <div class="code-indent">
                                    <div>
                                        <span class="code-property">vertexShaderID</span>: <span class="code-string">"my-plane-vs"</span><span class="code-var">,</span> <span class="code-comment">// ID of your vertex shader script tag</span>
                                    </div>
                                    <div>
                                        <span class="code-property">fragmentShaderID</span>: <span class="code-string">"my-plane-fs"</span><span class="code-var">,</span> <span class="code-comment">// ID of your fragment shader script tag</span>
                                    </div>
                                    <div>
                                        <span class="code-property">uniforms</span>: { <span class="code-comment">// uniforms are what will allow you to interact with your plane</span>
                                    </div>
                                    <div class="code-indent">
                                        <div>
                                            <span class="code-property">time</span>: {
                                        </div>
                                        <div class="code-indent">
                                            <div>
                                                <span class="code-property">name</span>: <span class="code-string">"uTime"</span><span class="code-var">,</span> <span class="code-comment">// uniform name that will be passed to our shaders</span>
                                            </div>
                                            <div>
                                                <span class="code-property">type</span>: <span class="code-string">"1f"</span><span class="code-var">,</span> <span class="code-comment">// this means our uniform is a float</span>
                                            </div>
                                            <div>
                                                <span class="code-property">value</span>: <span class="code-number">0</span><span class="code-var">,</span> <span class="code-comment">// initial value of the uniform</span>
                                            </div>
                                        </div>
                                        <div>
                                            }<span class="code-var">,</span>
                                        </div>
                                    </div>
                                    <div>
                                        }<span class="code-var">,</span>
                                    </div>
                                </div>
                                <div>
                                    }<span class="code-var">;</span>
                                </div>
                            </div>

                            <div>
                                <div class="code-comment">
                                    // create our plane with the above parameters
                                </div>
                                <div>
                                    <span class="code-var">const</span> plane = <span class="code-var">new</span> <span class="code-tag">Plane</span>(curtains<span class="code-var">,</span> planeElement<span class="code-var">,</span> params)<span class="code-var">;</span>
                                </div>
                            </div>
                        </div>

                        <h3>Passing shaders via data attributes</h3>
                        <p>You can also pass the IDs of the vertex and fragment shaders using respectively data-vs-id and data-fs-id attributes of your plane HTML element:
                        </p>

                        <div class="code">
                            <div class="code-block">

                                <div class="code-comment">
                                    &lt;!-- div used to create our plane --&gt;
                                </div>
                                <div>
                                    <span class="code-tag">&lt;div</span> id=<span class="code-string">"my-plane"</span> data-vs-id=<span class="code-string">"my-plane-vs"</span> data-fs-id=<span class="code-string">"my-plane-fs"</span><span class="code-tag">&gt;</span>
                                </div>

                            </div>

                            <div class="code-indent">

                                <div class="code-comment">
                                    &lt;!-- image that will be used as texture by our plane --&gt;
                                </div>
                                <div>
                                    <span class="code-tag">&lt;img</span> src=<span class="code-string">"path/to/my-image.jpg"</span> crossorigin=<span class="code-string">""</span> <span class="code-tag">/&gt;</span>
                                </div>

                            </div>

                            <div class="code-tag">
                                &lt;/div&gt;
                            </div>
                        </div>

                        <h3 id="parameters">Complete parameters list</h3>

                        <p>
                            Here is the complete list of the mandatory parameters and available options:
                        </p>
                        <ul class="api-item-parameters">
                            <li>
                                <span class="api-item-parameter-label">
                                    curtains
                                </span>
                                <span class="api-item-parameter-type">
                                    Curtains class object
                                </span>
                                <span class="api-item-parameter-desc">
                                    Your Curtains class object.
                                </span>
                            </li>
                            <li>
                                <span class="api-item-parameter-label">
                                    planeElement
                                </span>
                                <span class="api-item-parameter-type">
                                    HTML element
                                </span>
                                <span class="api-item-parameter-desc">
                                    a HTML element.
                                </span>
                            </li>
                            <li>
                                <span class="api-item-parameter-label">
                                    params
                                </span>
                                <span class="api-item-parameter-type">
                                    object, optional
                                </span>
                                <span class="api-item-parameter-desc">
                                    an object containing the plane parameters:
                                </span>

                                <ul id="add-plane-parameters" class="api-item-parameters-inner-list">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            vertexShader
                                        </span>
                                        <span class="api-item-parameter-type">
                                            string, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            your vertex shader as a string. Be careful with the line-breaks as it may throw javascript errors. Will look for vertexShaderID param if not specified.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            vertexShaderID
                                        </span>
                                        <span class="api-item-parameter-type">
                                            string, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            the vertex shader ID. If ommited, will look for a data attribute data-vs-id on the plane HTML element. Will use a default vertex shader and throw a warning if nothing specified.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            fragmentShader
                                        </span>
                                        <span class="api-item-parameter-type">
                                            string, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            your fragment shader as a string. Be careful with the line-breaks as it may throw javascript errors. Will look for fragmentShaderID param if not specified.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            fragmentShaderID
                                        </span>
                                        <span class="api-item-parameter-type">
                                            string, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            the fragment shader ID. If ommited, will look for a data attribute data-fs-id on the plane HTML element. Will use a default fragment shader that draws only black pixels and throw a warning if nothing specified.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            widthSegments
                                        </span>
                                        <span class="api-item-parameter-type">
                                            integer, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            the plane's definition along the X axis (1 by default).
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            heightSegments
                                        </span>
                                        <span class="api-item-parameter-type">
                                            integer, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            the plane's definition along the Y axis (1 by default).
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            renderOrder
                                        </span>
                                        <span class="api-item-parameter-type">
                                            int, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            defines in which order the planes are drawn. See <a href="plane-class.html#render-order">renderOrder</a> property. Default to 0.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            depthTest
                                        </span>
                                        <span class="api-item-parameter-type">
                                            bool, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            if your plane should enable or disable the depth test. Default to true.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            transparent
                                        </span>
                                        <span class="api-item-parameter-type">
                                            bool, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            if your plane should handle transparency and therefore be drawn after the planes that do not use transparency (false by default).
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            cullFace
                                        </span>
                                        <span class="api-item-parameter-type">
                                            string, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            which face of the plane should be culled. Could either be "back", "front" or "none". Default to "back".
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            alwaysDraw
                                        </span>
                                        <span class="api-item-parameter-type">
                                            bool, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Whether to use frustum culling: defines if the plane should always be drawn or if it should not be drawn if it lies completely outside of the scene (false by default).
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            visible
                                        </span>
                                        <span class="api-item-parameter-type">
                                            bool, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Whether to draw your plane (default to true).
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            drawCheckMargins
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Additional margins to add in the draw check calculations, in pixels.<br />
                                            Positive value means the plane will be drawn even if outside the canvas by less than the value, negative value means the plane will be hidden if inside the canvas by more than the value.<br />
                                            Useful if you're messing with the vertices positions in your vertex shader.
                                        </span>

                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    top
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    float
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    margin to apply when comparing the top side of the plane and the bottom side of the canvas (0 by default).
                                                </span>
                                            </li>
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    right
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    float
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    margin to apply when comparing the right side of the plane and the left side of the canvas (0 by default).
                                                </span>
                                            </li>
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    bottom
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    float
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    margin to apply when comparing the bottom side of the plane and the top side of the canvas (0 by default).
                                                </span>
                                            </li>
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    left
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    float
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    margin to apply when comparing the left side of the plane and the right side of the canvas (0 by default).
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            watchScroll
                                        </span>
                                        <span class="api-item-parameter-type">
                                            bool, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Whether the plane should auto update its position when the user scrolls (false by default).
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            autoloadSources
                                        </span>
                                        <span class="api-item-parameter-type">
                                            bool, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            defines if the sources should be load on init automatically (true by default).
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            texturesOptions
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Default options to apply to the textures of the plane. See the Texture class <a href="texture-class.html#parameters">parameters</a>.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            crossOrigin
                                        </span>
                                        <span class="api-item-parameter-type">
                                            string, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            defines the crossOrigin process to load images if any (default to "anonymous").
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            fov
                                        </span>
                                        <span class="api-item-parameter-type">
                                            integer, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            defines the perspective field of view (default to 50).
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            uniforms
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            the uniforms that will be passed to the shaders (if no uniforms specified there won't be any interaction with the plane).
                                        </span>

                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    name
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    string
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    The name of the uniform to use in your shaders
                                                </span>
                                            </li>
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    type
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    string
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    The type of your uniform (see <a href="https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html" title="all uniforms types" target="_blank">here</a>).
                                                </span>
                                            </li>
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    value
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    float, integer, Vec2, Vec3, Mat4 or array of floats or integers depending on your uniform type
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    The value of the uniform.
                                                </span>
                                            </li>
                                        </ul>
                                    </li>

                                </ul>
                            </li>
                        </ul>

                        <h2 id="properties">Properties</h2>
                        <ul>
                            <li id="always-draw">
                                <p>
                                    <strong>alwaysDraw</strong> (boolean): <span class="api-item-version">v2.0</span>
                                </p>
                                <p>
                                    Whether the WebGL renderer should always draw the plane or if it should draw it only when the plane is contained in the canvas viewport. Used for performance optimizations.
                                </p>
                                <p>
                                    Check the <a href="examples/plane-properties-transforms-cheat-sheet/index.html" title="Plane properties and transformations cheat sheet" target="_blank">Plane properties and transformations cheat sheet</a> example to see how it could be used.
                                </p>
                            </li>
                            <li id="autoload-sources">
                                <p>
                                    <strong>autoloadSources</strong> (boolean): <span class="api-item-version">v2.0</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    Whether the sources (images, videos and canvases HTML children elements of your plane) should be loaded and according textures created on plane initialization.
                                </p>
                            </li>
                            <li id="camera">
                                <p>
                                    <strong>camera</strong> (Camera class object): <span class="api-item-version">v7.0</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    The perspective camera used to compute the projection matrix of the plane.
                                </p>
                            </li>
                            <li id="canvases">
                                <p>
                                    <strong>canvases</strong> (array): <span class="api-item-version">v1.4</span>
                                </p>
                                <p>
                                    An array containing all the canvases loaded via the load methods into the plane.
                                </p>
                            </li>
                            <li id="cross-origin">
                                <p>
                                    <strong>crossOrigin</strong> (string): <span class="api-item-version">v1.4</span>
                                </p>
                                <p>
                                    The cross origin process used to load the medias.
                                </p>
                            </li>
                            <li id="cull-face">
                                <p>
                                    <strong>cullFace</strong> (string): <span class="api-item-version">v6.0</span>
                                </p>
                                <p>
                                    Which face of the plane should be culled (ie not drawn). Could either be <strong>"back"</strong> (only the front side of the plane is drawn), <strong>"front"</strong> (only the back side of the plane is drawn) or <strong>"none"</strong> (all the side of the plane are drawn). Default to "back".<br />
                                    You might want to change the default culling behavior if you apply a rotation along the X or Y axis for example (therefore showing the back side of the plane).
                                </p>
                                <p class="api-item-examples">
                                    Check the <a href="examples/plane-properties-transforms-cheat-sheet/index.html" title="Plane properties and transformations cheat sheet" target="_blank">Plane properties and transformations cheat sheet</a> example to see how it could be used.
                                </p>
                            </li>
                            <li id="draw-check-margins">
                                <p>
                                    <strong>drawCheckMargins</strong> (object): <span class="api-item-version">v4.0</span>
                                </p>
                                <p>
                                    Additional margins to add in the draw check calculations, in pixels.<br />
                                    Positive value means the plane will be drawn even if outside the canvas by less than the value, negative value means the plane will be hidden if inside the canvas by more than the value.<br />
                                    Useful if you're messing with the vertices positions in your vertex shader.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            top
                                        </span>
                                        <span class="api-item-parameter-type">
                                            float
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            margin to apply when comparing the top side of the plane and the bottom side of the canvas (0 by default).
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            right
                                        </span>
                                        <span class="api-item-parameter-type">
                                            float
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            margin to apply when comparing the right side of the plane and the left side of the canvas (0 by default).
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            bottom
                                        </span>
                                        <span class="api-item-parameter-type">
                                            float
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            margin to apply when comparing the bottom side of the plane and the top side of the canvas (0 by default).
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            left
                                        </span>
                                        <span class="api-item-parameter-type">
                                            float
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            margin to apply when comparing the left side of the plane and the right side of the canvas (0 by default).
                                        </span>
                                    </li>
                                </ul>
                                <p class="api-item-examples">
                                    Check the <a href="examples/plane-properties-transforms-cheat-sheet/index.html" title="Plane properties and transformations cheat sheet" target="_blank">Plane properties and transformations cheat sheet</a> example to see how it could be used.
                                </p>
                            </li>
                            <li id="gl">
                                <p>
                                    <strong>gl</strong> (WebGL context) <span class="api-item-version">v7.0</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    Our WebGL context.
                                </p>
                            </li>
                            <li id="html-element">
                                <p>
                                    <strong>htmlElement</strong> (HTML element): <span class="api-item-version">v1.0</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    The HTML element used to create your plane. Useful if you want to add event listeners to it.<br />
                                    You can change the HTML element used by the plane at runtime by using the <a href="plane-class.html#reset-plane">resetPlane()</a> method.
                                </p>
                            </li>
                            <li id="images">
                                <p>
                                    <strong>images</strong> (array): <span class="api-item-version">v1.0</span>
                                </p>
                                <p>
                                    An array containing all the images loaded via the load methods into the plane.
                                </p>
                            </li>
                            <li id="index">
                                <p>
                                    <strong>index</strong> (integer): <span class="api-item-version">v1.0</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    The index of your plane in the <a href="curtains-class.html#planes">Curtains planes array</a>.
                                </p>
                            </li>
                            <li id="loader">
                                <p>
                                    <strong>loader</strong> (PlaneTextureLoader class object): <span class="api-item-version">v7.0</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    The plane internal texture loader.
                                </p>
                            </li>
                            <li id="quaternion">
                                <p>
                                    <strong>quaternion</strong> (<a href="quat-class.html">Quat</a> class object): <span class="api-item-version">v6.0</span><span class="api-item-warning">updated in v7.0</span>
                                </p>
                                <p>
                                    A <a href="quat-class.html">Quat</a> class object representing your actual plane rotation in 3D space as a quaternion.
                                </p>
                            </li>
                            <li id="relative-translation">
                                <p>
                                    <strong>relativeTranslation</strong> (<a href="vec-3-class.html">Vec3</a> class object): <span class="api-item-version">v1.0</span><span class="api-item-warning">updated in v6.1</span>
                                </p>
                                <p>
                                    A <a href="vec-3-class.html">Vec3</a> class object containing the additional translation applied to your plane along X, Y and Z axis.
                                </p>
                                <p>
                                    Since <strong>v8.0</strong>, this property is reactive, which means that when you update one of the relativeTranslation vector component, the translation of the plane will automatically be updated:
                                </p>
                                <div class="code">

                                    <div class="code-comment">
                                        // translate our plane by 100px along X axis
                                    </div>
                                    <div>
                                        plane.<span class="code-property">relativeTranslation</span>.<span class="code-property">x</span> = <span class="code-number">100</span><span class="code-var">;</span>
                                    </div>
                                </div>
                            </li>
                            <li id="renderer">
                                <p>
                                    <strong>renderer</strong> (Renderer class object): <span class="api-item-version">v7.0</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    The Renderer class object created by our curtains object.
                                </p>
                            </li>
                            <li id="render-order">
                                <p>
                                    <strong>renderOrder</strong> (int): <span class="api-item-version">v7.3</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    The plane renderOrder value, which determines in which order the planes are drawn.<br />
                                    A plane will be rendered on top of planes with a lower renderOrder number.<br />
                                    Use <a href="plane-class.html#set-render-order">setRenderOrder()</a> to change this value. Default to 0.<br />
                                    See <a href="scene-rendering-order.html">Scene rendering order</a> to know more about how the things are drawn.
                                </p>
                            </li>
                            <li id="rotation">
                                <p>
                                    <strong>rotation</strong> (<a href="vec-3-class.html">Vec3</a> class object): <span class="api-item-version">v1.0</span>
                                </p>
                                <p>
                                    A <a href="vec-3-class.html">Vec3</a> class object containing the rotation applied to your plane on X, Y and Z axis.
                                </p>
                                <p>
                                    Since <strong>v8.0</strong>, this property is reactive, which means that when you update one of the rotation vector component, the rotation of the plane will automatically be updated:
                                </p>
                                <div class="code">

                                    <div class="code-comment">
                                        // rotate our plane by PI / 2 along X axis
                                    </div>
                                    <div>
                                        plane.<span class="code-property">rotation</span>.<span class="code-property">x</span> = Math.PI / <span class="code-number">2</span><span class="code-var">;</span>
                                    </div>
                                </div>
                            </li>
                            <li id="scale">
                                <p>
                                    <strong>scale</strong> (<a href="vec-3-class.html">Vec3</a> class object): <span class="api-item-version">v1.0</span>
                                </p>
                                <p>
                                    A <a href="vec-3-class.html">Vec3</a> class object containing the scale applied to your plane on X and Y axis (value along Z axis is always equal to 1).
                                </p>
                                <p>
                                    Since <strong>v8.0</strong>, this property is reactive, which means that when you update one of the scale vector component, the scale of the plane will automatically be updated:
                                </p>
                                <div class="code">

                                    <div class="code-comment">
                                        // scale our plane by 2 along X axis
                                    </div>
                                    <div>
                                        plane.<span class="code-property">scale</span>.<span class="code-property">x</span> = <span class="code-number">2</span><span class="code-var">;</span>
                                    </div>
                                </div>
                            </li>
                            <li id="target">
                                <p>
                                    <strong>target</strong> (renderTarget): <span class="api-item-version">v5.0</span>
                                </p>
                                <p>
                                    The render target used to render the plane. Null when no render target is applied and the plane is directly rendered onto the canvas.
                                </p>
                            </li>
                            <li id="textures">
                                <p>
                                    <strong>textures</strong> (array): <span class="api-item-version">v2.0</span>
                                </p>
                                <p>
                                    An array containing all the plane's <a href="texture-class.html">Textures</a> already created.
                                </p>
                            </li>
                            <li id="transform-origin">
                                <p>
                                    <strong>transformOrigin</strong> (<a href="vec-3-class.html">Vec3</a> class object): <span class="api-item-version">v5.0</span><span class="api-item-warning">updated in v6.0</span>
                                </p>
                                <p>
                                    A <a href="vec-3-class.html">Vec3</a> class object containing your plane transform origin position along X, Y and Z axis.<br />
                                    { x:0, y:0, z:0 } is the plane top left corner whereas { x:1, y:1, z:0 } is the plane bottom right corner.<br />
                                    Use the value along the Z axis to set the transformation origin behind (negative value) or in front (positive value) the plane.<br />
                                    Values could be negative, or greater than 1. Default to { x:0.5, y:0.5, z:0 } (center of the plane).
                                </p>
                                <p class="api-item-examples">
                                    Check the <a href="examples/plane-properties-transforms-cheat-sheet/index.html" title="Plane properties and transformations cheat sheet" target="_blank">Plane properties and transformations cheat sheet</a> example to see how it could be used.
                                </p>
                            </li>
                            <li id="type">
                                <p>
                                    <strong>type</strong> (string): <span class="api-item-version">v7.0</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    Class object type: "Plane".
                                </p>
                            </li>
                            <li id="uniforms">
                                <p>
                                    <strong>uniforms</strong> (object): <span class="api-item-version">v1.0</span><span class="api-item-warning">updated in v7.0</span>
                                </p>
                                <p>
                                    An object containing all the uniforms you passed as parameters.<br />
                                    You can update your uniform by modifying its value property.<br />
                                    Since version 7.0, <strong>you can directly use <a href="vec-2-class.html">Vec2</a>, <a href="vec-3-class.html">Vec3</a>, <a href="mat-4-class.html">Mat4</a> and <a href="quat-class.html">Quat</a> objects as uniform values</strong> instead of arrays.
                                </p>
                            </li>
                            <li id="user-data">
                                <p>
                                    <strong>userData</strong> (object): <span class="api-item-version">v4.2</span>
                                </p>
                                <p>
                                    An empty object to store any additional data or custom properties into your plane.
                                </p>
                            </li>
                            <li id="uuid">
                                <p>
                                    <strong>uuid</strong> (string): <span class="api-item-version">v6.0</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    The plane's unique identifier.
                                </p>
                            </li>
                            <li id="videos">
                                <p>
                                    <strong>videos</strong> (array): <span class="api-item-version">v1.2</span>
                                </p>
                                <p>
                                    An array containing all the videos loaded via the load methods into the plane.
                                </p>
                            </li>
                            <li id="visible">
                                <p>
                                    <strong>visible</strong> (boolean): <span class="api-item-version">v4.3</span>
                                </p>
                                <p>
                                    Whether your plane should be drawn or not. Set this property to true or false to toggle the plane's visibility.
                                </p>
                                <p class="api-item-examples">
                                    Check the <a href="examples/plane-properties-transforms-cheat-sheet/index.html" title="Plane properties and transformations cheat sheet" target="_blank">Plane properties and transformations cheat sheet</a> example to see how it could be used.
                                </p>
                            </li>
                            <li id="watch-scroll">
                                <p>
                                    <strong>watchScroll</strong> (bool): <span class="api-item-version">v4.0</span>
                                </p>
                                <p>
                                    Whether your plane's position should be automatically updated when the user scrolls.
                                </p>
                            </li>
                        </ul>

                        <h2 id="methods">Methods</h2>
                        <ul>
                            <li id="add-texture">
                                <p>
                                    <strong>addTexture</strong>(texture): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    This function takes an already existing texture and adds it to the plane.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            texture
                                        </span>
                                        <span class="api-item-parameter-type">
                                            <a href="texture-class.html">Texture</a> class object
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            The texture to add to this plane. Equivalent of the Texture class <a href="texture-class.html#add-parent">addParent()</a> method.
                                        </span>

                                    </li>
                                </ul>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/ajax-navigation-with-plane-removal/index.html" title="AJAX navigation with plane removal" target="_blank">AJAX navigation with plane removal</a> example.
                                </p>
                            </li>
                            <li id="create-texture">
                                <p>
                                    <strong>createTexture</strong>(params): <span class="api-item-version">v2.0</span><span class="api-item-version api-item-version-update">updated in v7.0</span>
                                </p>
                                <p>
                                    This function will create a new <a href="texture-class.html">Texture</a> and add it to our Plane.<br />
                                    The newly created texture will be returned.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            params
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            an object containing the texture <a href="texture-class.html#parameters">parameters</a>. Will use the default plane texturesOptions if not specified, but you should at least provide a sampler name.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> the newly created <a href="texture-class.html">Texture</a> if successful.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/multiple-textures/index.html" title="Slideshow with a displacement shader" target="_blank">Slideshow with a displacement shader</a> and <a href="examples/ping-pong-shading-flowmap/index.html" title="Ping pong shading flowmap" target="_blank">Ping pong shading flowmap</a> examples.
                                </p>
                            </li>

                            <li id="enable-depth-test">
                                <p>
                                    <strong>enableDepthTest</strong>(shouldEnableDepthTest): <span class="api-item-version">v1.3</span>
                                </p>
                                <p>
                                    Switches on/off the depth test for that plane. You might want to disable the depth test if you got transparency issues.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            shouldEnableDepthTest
                                        </span>
                                        <span class="api-item-parameter-type">
                                            bool
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            enable or disable the depth test for that plane.
                                        </span>
                                    </li>
                                </ul>
                            </li>

                            <li id="get-bounding-rect">
                                <p>
                                    <strong>getBoundingRect</strong>(): <span class="api-item-version">v3.0</span>
                                </p>
                                <p>
                                    Useful to get our plane HTML element bounding rectangle without causing a reflow/layout repaint. Be careful as the values are relative to your <a href="curtains-class.html#pixel-ratio">Curtains pixelRatio</a> value.
                                </p>
                                <p>
                                    <strong>returns:</strong> an object containing the plane HTML element width, height, top, right, bottom and left positions in pixels.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/simple-canvas-plane/index.html" title="Simple canvas plane" target="_blank">Simple canvas plane</a>, <a href="examples/multiple-planes-canvas-text/index.html" title="Text planes using canvas" target="_blank">Text planes using canvas</a>, <a href="examples/multiple-planes-scroll-effect/index.html" title="Multiple planes scroll effect" target="_blank">Multiple planes scroll effect</a> and <a href="examples/post-processing-scroll-effect/index.html" title="Post processing multiple passes" target="_blank">Post processing multiple passes</a> examples.
                                </p>
                            </li>

                            <li id="get-webgl-bounding-rect">
                                <p>
                                    <strong>getWebGLBoundingRect</strong>(): <span class="api-item-version">v4.0</span>
                                </p>
                                <p>
                                    Useful to get our plane WebGL element bounding rectangle relative to the viewport, with all transformations applied. Used internally in the draw check function (frustum culling).
                                </p>
                                <p>
                                    <strong>returns:</strong> an object containing the plane WebGL element width, height, top, right, bottom and left positions in pixels.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/plane-properties-transforms-cheat-sheet/index.html" title="Plane properties and transformations cheat sheet" target="_blank">Plane properties and transformations cheat sheet</a> example.
                                </p>
                            </li>

                            <li id="is-drawn">
                                <p>
                                    <strong>isDrawn</strong>(): <span class="api-item-version">v5.3</span>
                                </p>
                                <p>
                                    Use this function to check if a plane is currently being drawn or not. A plane is not drawn either if it has not been fully initiated yet, its <a href="plane-class.html#visible">visible property</a> is set to false or it is being culled.
                                </p>
                                <p>
                                    <strong>returns:</strong> a boolean indicating whether the plane is currently drawn or not.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/plane-properties-transforms-cheat-sheet/index.html" title="Plane properties and transformations cheat sheet" target="_blank">Plane properties and transformations cheat sheet</a> example.
                                </p>
                            </li>

                            <li id="load-canvas">
                                <p>
                                    <strong>loadCanvas</strong>(canvasElement, textureOptions, successCallback): <span class="api-item-version">v2.0</span><span class="api-item-warning">updated in v7.0</span>
                                </p>
                                <p>
                                    This function takes a canvas HTML element, creates a <a href="texture-class.html">Texture</a> using it and loads it into your plane.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            canvasElement
                                        </span>
                                        <span class="api-item-parameter-type">
                                            HTML canvas element
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            a HTML canvas element to load into your plane.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            textureOptions
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Default options to apply to that texture. See the Texture class <a href="texture-class.html#parameters">parameters</a>.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            successCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(texture), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on successful source load.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    texture
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    <a href="texture-class.html">Texture</a> class object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    newly created texture. You'll have access to the textures <a href="texture-class.html#on-source-loaded">onSourceLoaded</a> and <a href="texture-class.html#on-source-uploaded">onSourceUploaded</a> callbacks here.
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/multiple-planes-canvas-text/index.html" title="Text planes using canvas" target="_blank">Text planes using canvas</a> example.
                                </p>
                            </li>

                            <li id="load-canvases">
                                <p>
                                    <strong>loadCanvases</strong>(canvasElements, texturesOptions, successCallback): <span class="api-item-version">v2.0</span><span class="api-item-warning">updated in v7.0</span>
                                </p>
                                <p>
                                    This function takes an array of canvas HTML elements and creates a <a href="texture-class.html">Texture</a> for each of them.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            canvasElements
                                        </span>
                                        <span class="api-item-parameter-type">
                                            array or collection of HTML canvas elements
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            an array or collection of HTML canvas elements to load into your plane.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            texturesOptions
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Default options to apply to those textures. See the Texture class <a href="texture-class.html#parameters">parameters</a>.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            successCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(texture), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on each successful source load.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    texture
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    <a href="texture-class.html">Texture</a> class object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    newly created texture. You'll have access to the textures <a href="texture-class.html#on-source-loaded">onSourceLoaded</a> and <a href="texture-class.html#on-source-uploaded">onSourceUploaded</a> callbacks here.
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li id="load-image">
                                <p>
                                    <strong>loadImage</strong>(imageElement, textureOptions, successCallback, errorCallback): <span class="api-item-version">v2.0</span><span class="api-item-warning">updated in v7.1</span>
                                </p>
                                <p>
                                    This function takes an image HTML element (or image source URL), creates a <a href="texture-class.html">Texture</a> using it and loads it into your plane.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            imageElement
                                        </span>
                                        <span class="api-item-parameter-type">
                                            HTML image element or string
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            a HTML image element or image source URL to load into your plane.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            textureOptions
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Default options to apply to that texture. See the Texture class <a href="texture-class.html#parameters">parameters</a>.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            successCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(texture), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on successful source load.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    texture
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    <a href="texture-class.html">Texture</a> class object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    newly created texture. You'll have access to the textures <a href="texture-class.html#on-source-loaded">onSourceLoaded</a> and <a href="texture-class.html#on-source-uploaded">onSourceUploaded</a> callbacks here.
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            errorCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(image, error), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on source load error.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    image
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    HTML image element
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    The image you were trying to load
                                                </span>
                                            </li>
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    error
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    Error thrown
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li id="load-images">
                                <p>
                                    <strong>loadImages</strong>(imageElements, texturesOptions, successCallback, errorCallback): <span class="api-item-version">v2.0</span><span class="api-item-warning">updated in v7.1</span>
                                </p>
                                <p>
                                    This function takes an array of image HTML elements (or images sources URL) and creates a <a href="texture-class.html">Texture</a> for each of them.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            imageElements
                                        </span>
                                        <span class="api-item-parameter-type">
                                            array or collection of HTML image elements or strings
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            an array or collection of HTML image elements or images sources URL to load into your plane.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            texturesOptions
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Default options to apply to those textures. See the Texture class <a href="texture-class.html#parameters">parameters</a>.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            successCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(texture), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on each successful source load.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    texture
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    <a href="texture-class.html">Texture</a> class object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    newly created texture. You'll have access to the textures <a href="texture-class.html#on-source-loaded">onSourceLoaded</a> and <a href="texture-class.html#on-source-uploaded">onSourceUploaded</a> callbacks here.
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            errorCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(image, error), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on each source load error.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    image
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    HTML image element
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    The image you were trying to load
                                                </span>
                                            </li>
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    error
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    Error thrown
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/asynchronous-textures/index.html" title="Asynchronous textures loading" target="_blank">Asynchronous textures loading</a> example.
                                </p>
                            </li>

                            <li id="load-source">
                                <p>
                                    <strong>loadSource</strong>(sourceElement, textureOptions, successCallback, errorCallback): <span class="api-item-version">v2.0</span><span class="api-item-warning">updated in v7.1</span>
                                </p>
                                <p>
                                    This function takes a source element (or source URL), creates a <a href="texture-class.html">Texture</a> using it and loads it into your plane.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            sourceElement
                                        </span>
                                        <span class="api-item-parameter-type">
                                            either image, canvas, video HTML element or string
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            an image, canvas, video HTML element or source URL to load into your plane.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            textureOptions
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Default options to apply to that texture. See the Texture class <a href="texture-class.html#parameters">parameters</a>.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            successCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(texture), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on successful source load.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    texture
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    <a href="texture-class.html">Texture</a> class object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    newly created texture. You'll have access to the textures <a href="texture-class.html#on-source-loaded">onSourceLoaded</a> and <a href="texture-class.html#on-source-uploaded">onSourceUploaded</a> callbacks here.
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            errorCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(source, error), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on source load error.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    source
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    either an image, canvas or video HTML element
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    The source you were trying to load
                                                </span>
                                            </li>
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    error
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    Error thrown
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li id="load-sources">
                                <p>
                                    <strong>loadSources</strong>(sourceElements, texturesOptions, successCallback, errorCallback): <span class="api-item-version">v2.0</span><span class="api-item-warning">updated in v7.1</span>
                                </p>
                                <p>
                                    This function takes an array of source elements (or sources URL), creates <a href="texture-class.html">Textures</a> using them and loads them into your plane.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            sourceElements
                                        </span>
                                        <span class="api-item-parameter-type">
                                            array or collection of either images, canvases or videos HTML elements or strings
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            an array of image, canvas or video HTML elements or sources URL to load into your plane.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            textureOptions
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Default options to apply to that texture. See the Texture class <a href="texture-class.html#parameters">parameters</a>.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            successCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(texture), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on each successful source load.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    texture
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    <a href="texture-class.html">Texture</a> class object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    newly created texture. You'll have access to the textures <a href="texture-class.html#on-source-loaded">onSourceLoaded</a> and <a href="texture-class.html#on-source-uploaded">onSourceUploaded</a> callbacks here.
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            errorCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(source, error), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on each source load error.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    source
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    either an image, canvas or video HTML element
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    The source you were trying to load
                                                </span>
                                            </li>
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    error
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    Error thrown
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li id="load-video">
                                <p>
                                    <strong>loadVideo</strong>(videoElement, textureOptions, successCallback, errorCallback): <span class="api-item-version">v2.0</span><span class="api-item-warning">updated in v7.1</span>
                                </p>
                                <p>
                                    This function takes a video HTML element (or video source URL), creates a <a href="texture-class.html">Texture</a> using it and loads it into your plane.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            videoElement
                                        </span>
                                        <span class="api-item-parameter-type">
                                            HTML video element or string
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            a HTML video element or video source URL to load into your plane.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            textureOptions
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Default options to apply to that texture. See the Texture class <a href="texture-class.html#parameters">parameters</a>.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            successCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(texture), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on successful source load.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    texture
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    <a href="texture-class.html">Texture</a> class object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    newly created texture. You'll have access to the textures <a href="texture-class.html#on-source-loaded">onSourceLoaded</a> and <a href="texture-class.html#on-source-uploaded">onSourceUploaded</a> callbacks here.
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            errorCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(video, error), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on source load error.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    video
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    HTML video element
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    The video you were trying to load
                                                </span>
                                            </li>
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    error
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    Error thrown
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li id="load-videos">
                                <p>
                                    <strong>loadVideos</strong>(videoElements, texturesOptions, successCallback, errorCallback): <span class="api-item-version">v2.0</span><span class="api-item-warning">updated in v7.1</span>
                                </p>
                                <p>
                                    This function takes an array of video HTML elements (or videos sources URL) and creates a <a href="texture-class.html">Texture</a> for each of them.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            videoElements
                                        </span>
                                        <span class="api-item-parameter-type">
                                            array or collection of HTML video elements or strings
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            an array or collection of HTML video elements or videos sources URL to load into your plane.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            texturesOptions
                                        </span>
                                        <span class="api-item-parameter-type">
                                            object, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Default options to apply to those textures. See the Texture class <a href="texture-class.html#parameters">parameters</a>.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            successCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(texture), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on each successful source load.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    texture
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    <a href="texture-class.html">Texture</a> class object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    newly created texture. You'll have access to the textures <a href="texture-class.html#on-source-loaded">onSourceLoaded</a> and <a href="texture-class.html#on-source-uploaded">onSourceUploaded</a> callbacks here.
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            errorCallback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function(video, error), optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            Callback executed on each source load error.
                                        </span>
                                        <ul class="api-item-parameters-inner-list">
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    video
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    HTML video element
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    The video you were trying to load
                                                </span>
                                            </li>
                                            <li>
                                                <span class="api-item-parameter-label">
                                                    error
                                                </span>
                                                <span class="api-item-parameter-type">
                                                    object
                                                </span>
                                                <span class="api-item-parameter-desc">
                                                    Error thrown
                                                </span>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li id="mouse-to-plane-coords">
                                <p>
                                    <strong>mouseToPlaneCoords</strong>(mousePosition): <span class="api-item-version">v1.0</span>
                                </p>
                                <p>
                                    Get the mouse coordinates relative to the plane clip space values. Use it to send to a uniform and interact with your plane. A plane coordinates ranges from (-1, 1) in the top left corner to (1, -1) in the bottom right corner, which means the values along the Y axis are inverted.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            mousePosition
                                        </span>
                                        <span class="api-item-parameter-type">
                                            <a href="vec-2-class.html">Vec2</a> class object
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            mouse position along X and Y axis (you should use the event clientX and clientY values).
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> a <a href="vec-2-class.html">Vec2</a> class object containing the mouse coordinates relative to the plane clip space values.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/vertex-coords-helper/index.html" title="Vertex coordinates helper" target="_blank">Vertex coordinates helper</a>, <a href="examples/simple-plane/index.html" title="Simple plane" target="_blank">Simple plane</a>, <a href="examples/simple-video-plane/index.html" title="Simple video plane" target="_blank">Simple video plane</a>, <a href="examples/simple-canvas-plane/index.html" title="Simple canvas plane" target="_blank">Simple canvas plane</a> examples.
                                </p>
                            </li>

                            <li id="play-videos">
                                <p>
                                    <strong>playVideos</strong>(): <span class="api-item-version">v1.2</span>
                                </p>
                                <p>
                                    This function will automatically start all of your plane videos playback. If you are not calling it after a user action it might not work on mobile.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/simple-video-plane/index.html" title="Simple video plane" target="_blank">Simple video plane</a>, <a href="examples/multiple-video-textures/index.html" title="Multiple video textures" target="_blank">Multiple video textures with a displacement shader</a> examples.
                                </p>
                            </li>

                            <li id="remove">
                                <p>
                                    <strong>remove</strong>(): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    This function will remove the plane from our Curtains object and renderer and delete all of its textures. It will also update all other planes indexes.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/ajax-navigation-with-plane-removal/index.html" title="AJAX navigation with plane removal" target="_blank">AJAX navigation with plane removal</a> example.
                                </p>
                            </li>

                            <li id="remove-render-target">
                                <p>
                                    <strong>removeRenderTarget</strong>(): <span class="api-item-version">v7.3</span>
                                </p>
                                <p>
                                    Removes the plane current render target if any.
                                </p>
                            </li>

                            <li id="reset-plane">
                                <p>
                                    <strong>resetPlane</strong>(htmlElement): <span class="api-item-version">v5.1</span>  <span class="api-item-warning">may trigger reflow</span>
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            htmlElement
                                        </span>
                                        <span class="api-item-parameter-type">
                                            HTML element, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            a new HTML to use for your plane sizes and position syncing. Default to null (keep the current HTML element).
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    Reset your plane transformations values, including the transform origin.<br />
                                    If a HTML element is specified, will update the plane's sizes and position according to that new element (<strong>triggers reflow</strong>). Useful if you want to keep a plane after an AJAX page transition and re-sync it with a newly appended element.
                                </p>

                            </li>

                            <li id="resize">
                                <p>
                                    <strong>resize</strong>(): <span class="api-item-version">v7.0</span> <span class="api-item-warning">triggers reflow</span>
                                </p>
                                <p>
                                    This method is called internally by the Curtains <a href="curtains-class.html#resize">resize()</a> method each time the window is resized, but you should call it manually each time you're updating a plane size, either via CSS animations or directly in javascript. It will updates its position as well.
                                </p>
                            </li>

                            <li id="set-perspective">
                                <p>
                                    <strong>setPerspective</strong>(fieldOfView, nearPlane, farPlane): <span class="api-item-version">v1.0</span><span class="api-item-warning">updated in v7.0</span>
                                </p>
                                <p>
                                    Set the perspective. Increasing the field of view will increase the perspective.<br />
                                    Since v7.0, all the internal maths are done assuming the camera Z position is available via the plane's camera <a href="vec-3-class.html">Vec3</a> position <strong>plane.camera.position.z</strong> property.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            fieldOfView
                                        </span>
                                        <span class="api-item-parameter-type">
                                            integer
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            the perspective field of view. Should be greater than 0 and lower than 180. Default to 50.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            nearPlane
                                        </span>
                                        <span class="api-item-parameter-type">
                                            float, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            closest point where a mesh vertex is displayed. Default to 0.1.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            farPlane
                                        </span>
                                        <span class="api-item-parameter-type">
                                            float, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            farthest point where a mesh vertex is displayed. Default to 150.
                                        </span>
                                    </li>
                                </ul>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/plane-properties-transforms-cheat-sheet/index.html" title="Plane properties and transformations cheat sheet" target="_blank">Plane properties and transformations cheat sheet</a>, <a href="examples/simple-plane/index.html" title="Simple plane" target="_blank">Simple plane</a>, <a href="examples/simple-video-plane/index.html" title="Simple video plane" target="_blank">Simple video plane</a>, <a href="examples/simple-canvas-plane/index.html" title="Simple canvas plane" target="_blank">Simple canvas plane</a> examples.
                                </p>
                            </li>

                            <li id="set-render-order">
                                <p>
                                    <strong>setRenderOrder</strong>(renderOrder): <span class="api-item-version">v7.3</span>
                                </p>
                                <p>
                                    Sets the plane new <a href="plane-class.html#render-order">render order</a>.<br />
                                    A plane will be rendered on top of planes with a lower renderOrder number. Negative numbers are accepted. You can ommit the renderOrder parameter to reset a plane renderOrder value.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            renderOrder
                                        </span>
                                        <span class="api-item-parameter-type">
                                            int
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            the new render order to use. Default to 0.
                                        </span>
                                    </li>
                                </ul>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/gsap-click-to-fullscreen-gallery/index.html" title="GSAP click to fullscreen gallery example" target="_blank">GSAP click to fullscreen gallery</a> example.
                                </p>
                            </li>

                            <li id="set-render-target">
                                <p>
                                    <strong>setRenderTarget</strong>(renderTarget): <span class="api-item-version">v5.0</span>
                                </p>
                                <p>
                                    The render target onto which you want to render your plane.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            renderTarget
                                        </span>
                                        <span class="api-item-parameter-type">
                                            <a href="render-target-class.html">RenderTarget</a> class object
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            the RenderTarget to use.
                                        </span>
                                    </li>
                                </ul>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/ping-pong-shading-flowmap/index.html" title="Ping pong shading flowmap example" target="_blank">Ping pong shading flowmap example</a> and <a href="examples/render-passes-using-render-targets/index.html" title="Selective shader passes using render targets" target="_blank">Selective shader passes using render targets</a> examples.
                                </p>
                            </li>

                            <li id="set-relative-translation">
                                <p>
                                    <strong>setRelativeTranslation</strong>(translation): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    Set the plane translation based on pixel units. Please note that this will not be applied to your plane HTML element, so it's more like an additional translation.<br />
                                    The translation along the Z axis is being treated like the <strong>CSS translateZ</strong> function, using the current field of view to compute the corresponding <strong>CSS perspective</strong> property (a small field of view means a big perspective value and vice versa).
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            translation
                                        </span>
                                        <span class="api-item-parameter-type">
                                            <a href="vec-3-class.html">Vec3</a> class object
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            the translation value to apply on the X, Y and Z axes in pixel.
                                        </span>
                                    </li>
                                </ul>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/plane-properties-transforms-cheat-sheet/index.html" title="Plane properties and transformations cheat sheet" target="_blank">Plane properties and transformations cheat sheet</a>, <a href="examples/multiple-planes-scroll-effect/index.html" title="Multiple planes scroll effect : rotation, scale and parallax" target="_blank">Multiple planes scroll effect : rotation, scale and parallax</a> and <a href="examples/post-processing-scroll-effect/index.html" title="Post processing multiple passes" target="_blank">Post processing multiple passes</a> examples.
                                </p>
                            </li>

                            <li id="set-rotation">
                                <p>
                                    <strong>setRotation</strong>(angle): <span class="api-item-version">v1.0</span><span class="api-item-warning">updated in v7.0</span>
                                </p>
                                <p>
                                    Set the plane rotation using Euler angles and 'XYZ' as axes order.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            angle
                                        </span>
                                        <span class="api-item-parameter-type">
                                            <a href="vec-3-class.html">Vec3</a> class object
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            the angle in radians to rotate around the X, Y and Z axes.
                                        </span>
                                    </li>
                                </ul>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/plane-properties-transforms-cheat-sheet/index.html" title="Plane properties and transformations cheat sheet" target="_blank">Plane properties and transformations cheat sheet</a>, <a href="examples/multiple-planes-scroll-effect/index.html" title="Multiple planes scroll effect : rotation, scale and parallax" target="_blank">Multiple planes scroll effect : rotation, scale and parallax</a> example.
                                </p>
                            </li>

                            <li id="set-scale">
                                <p>
                                    <strong>setScale</strong>(scale): <span class="api-item-version">v1.0</span><span class="api-item-warning">updated in v7.0</span>
                                </p>
                                <p>
                                    Set the plane new scale.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            scale
                                        </span>
                                        <span class="api-item-parameter-type">
                                            <a href="vec-2-class.html">Vec2</a> class object
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            the scale to set along the X and Y axes.
                                        </span>
                                    </li>
                                </ul>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/plane-properties-transforms-cheat-sheet/index.html" title="Plane properties and transformations cheat sheet" target="_blank">Plane properties and transformations cheat sheet</a>, <a href="examples/multiple-planes-scroll-effect/index.html" title="Multiple planes scroll effect : rotation, scale and parallax" target="_blank">Multiple planes scroll effect : rotation, scale and parallax</a> and <a href="examples/post-processing-scroll-effect/index.html" title="Post processing multiple passes" target="_blank">Post processing multiple passes</a> examples.
                                </p>
                            </li>

                            <li id="set-transform-origin">
                                <p>
                                    <strong>setTransformOrigin</strong>(origin): <span class="api-item-version">v5.0</span><span class="api-item-warning">updated in v7.0</span>
                                </p>
                                <p>
                                    Set the plane transform origin to use with your transformations (scale and rotation). See the <a href="plane-class.html#transform-origin">transformOrigin</a> property.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            origin
                                        </span>
                                        <span class="api-item-parameter-type">
                                            <a href="vec-3-class.html">Vec3</a> class object
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            the plane transform origin along the X, Y and Z axes.
                                        </span>
                                    </li>
                                </ul>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/plane-properties-transforms-cheat-sheet/index.html" title="Plane properties and transformations cheat sheet" target="_blank">Plane properties and transformations cheat sheet</a> and <a href="examples/multiple-planes-scroll-effect/index.html" title="Post processing scrolling wheel with custom transform origin" target="_blank">Post processing scrolling wheel with custom transform origin</a> example.
                                </p>
                            </li>

                            <li id="update-position">
                                <p>
                                    <strong>updatePosition</strong>(): <span class="api-item-version">v1.6</span> <span class="api-item-warning">triggers reflow</span>
                                </p>
                                <p>
                                    Internally, the planes positions are updated only when the window is resized. But if you are updating your plane HTML element position without resizing the window (typically while scrolling, animating its CSS position or transform values), call this method in your animation loop at the same time.<br />
                                    This method calls getBoundingClientRect() therefore causing a reflow/layout repaint of the page. See <a href="#set-relative-translation">setRelativeTranslation</a> to update your plane position without any reflow.
                                </p>
                            </li>

                            <li id="update-scroll-position">
                                <p>
                                    <strong>updateScrollPosition</strong>(): <span class="api-item-version">v4.0</span>
                                </p>
                                <p>
                                    Use it if you want to handle the scroll event by yourself, like with a virtual scroll library. You will have to pass the scroll values to the Curtains class with <a href="curtains-class.html#update-scroll-values">updateScrollValues()</a> before calling this method.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/multiple-planes-scroll-effect-custom-scroll/index.html" title="Multiple planes scroll effect with Locomotive scroll" target="_blank">Multiple planes scroll effect with Locomotive scroll</a> example.
                                </p>
                            </li>

                        </ul>

                        <h2 id="events">Events</h2>
                        <ul>
                            <li id="on-after-render">
                                <p>
                                    <strong>onAfterRender</strong>(callback): <span class="api-item-version">v5.0</span>
                                </p>
                                <p>
                                    This function will be called just after your plane has been drawn.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                           function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            function to execute.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> your Plane object, allowing it to be chainable.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/ping-pong-shading-flowmap/index.html" title="Ping pong shading flowmap" target="_blank">Ping pong shading flowmap</a> example.
                                </p>
                            </li>
                            <li id="on-after-resize">
                                <p>
                                    <strong>onAfterResize</strong>(callback): <span class="api-item-version">v3.0</span>
                                </p>
                                <p>
                                    This function will be called each time your plane has been resized, after everything has been updated.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                           function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            function to execute.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> your Plane object, allowing it to be chainable.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/multiple-planes-scroll-effect/index.html" title="Multiple planes scroll effect : rotation, scale and parallax" target="_blank">Multiple planes scroll effect : rotation, scale and parallax</a>, <a href="examples/simple-canvas-plane/index.html" title="Simple canvas plane" target="_blank">Simple canvas plane</a>, <a href="examples/multiple-planes-canvas-text/index.html" title="Text planes using canvas" target="_blank">Text planes using canvas</a> and <a href="examples/post-processing-scroll-effect/index.html" title="Post processing multiple passes" target="_blank">Post processing multiple passes</a> examples.
                                </p>
                            </li>
                            <li id="on-error">
                                <p>
                                    <strong>onError</strong>(callback): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    This function is called if there's an error while instancing your plane, usually because the shaders compilation failed.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                           function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            function to execute.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> your Plane object, allowing it to be chainable.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/ajax-navigation-with-plane-removal/index.html" title="AJAX navigation with plane removal" target="_blank">AJAX navigation with plane removal</a> example.
                                </p>
                            </li>
                            <li id="on-leave-view">
                                <p>
                                    <strong>onLeaveView</strong>(callback): <span class="api-item-version">v2.0</span>
                                </p>
                                <p>
                                    This function will be triggered each time a plane leaves the Curtains container viewport area, unless <a href="plane-class.html#always-draw">alwaysDraw property</a> is set to true.<br />
                                    If alwaysDraw property is set to false, an out-of-view plane is not drawn anymore and its textures are no longer updated, but its uniforms are still updated and its onRender callback is still called.<br />
                                    You might want to pause its videos as well if it contains any.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                           function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            function to execute.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> your Plane object, allowing it to be chainable.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/multiple-planes-scroll-effect/index.html" title="Multiple planes scroll effect : rotation, scale and parallax" target="_blank">Multiple planes scroll effect : rotation, scale and parallax</a> example.
                                </p>
                            </li>
                            <li id="on-loading">
                                <p>
                                    <strong>onLoading</strong>(callback(texture)): <span class="api-item-version">v1.0</span>
                                </p>
                                <p>
                                    This function will be fired each time a source element (either an image, a canvas or a video) of the plane has been loaded and is ready to display. You'll have access here to the newly created texture. Useful to handle a loader or manipulate the texture.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                           function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            function to execute, with the newly created texture passed as parameter.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> your Plane object, allowing it to be chainable.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/asynchronous-textures/index.html" title="Asynchronous textures loading" target="_blank">Asynchronous textures loading</a> example.
                                </p>
                            </li>
                            <li id="on-ready">
                                <p>
                                    <strong>onReady</strong>(callback): <span class="api-item-version">v1.0</span>
                                </p>
                                <p>
                                    This function will be called once our plane is all set up and ready to be drawn.<br />
                                    If <a href="plane-class.html#autoload-sources">autoloadSources</a> is set to true, il will be called after the images, canvas and videos are loaded. Otherwise it will be called almost right away.<br />
                                    This is where you may want to add event listener to interact with your plane or update its uniforms.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                           function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            function to execute.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> your Plane object, allowing it to be chainable.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in most <a href="index.html#examples" title="Useful examples">examples</a>.
                                </p>
                            </li>
                            <li id="on-re-enter-view">
                                <p>
                                    <strong>onReEnterView</strong>(callback): <span class="api-item-version">v2.0</span>
                                </p>
                                <p>
                                    This function will be triggered each time a plane reenters the Curtains container viewport area, unless <a href="plane-class.html#always-draw">alwaysDraw property</a> is set to true.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                           function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            function to execute.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> your Plane object, allowing it to be chainable.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/multiple-planes-scroll-effect/index.html" title="Multiple planes scroll effect : rotation, scale and parallax" target="_blank">Multiple planes scroll effect : rotation, scale and parallax</a> example.
                                </p>
                            </li>
                            <li id="on-render">
                                <p>
                                    <strong>onRender</strong>(callback): <span class="api-item-version">v1.0</span>
                                </p>
                                <p>
                                    This function will be triggered for each plane at each requestAnimationFrame call. Useful to update a time uniform, change plane rotation, scale, etc.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                           function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            function to execute.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> your Plane object, allowing it to be chainable.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in most <a href="index.html#examples" title="Useful examples">examples</a>.
                                </p>
                            </li>

                        </ul>
                    </div>
                </div>

            </div>

        </section>
    </div>
</div>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-141413267-1"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-141413267-1');
</script>

</body>
</html>